<!--
 * @Author: vn53el9 vn53el9@email.wal.mart.com
 * @Date: 2022-10-20 14:25:33
 * @LastEditors: Evan Liu
 * @LastEditTime: 2022-11-18 15:01:55
 * @FilePath: \ias_ui\src\views\coi\CBEC\components\vendor.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <headline :headline="'供应商'" />
    <el-form ref="ruleForm" class="form" :model="goodsInfo" label-width="150px" size="mini" label-position="left">
      <el-row :gutter="20">
        <el-col :span="12" :xl="8">
          <el-form-item label="9位供应商号" prop="buildVendorNbr9" :rules="{ required: true, message: `请输入9位供应商号`, trigger: 'blur' }">
            <el-input v-if="show" v-model.trim="goodsInfo.buildVendorNbr9" :disabled="isDisabled" maxlength="9" class="marginRight" @blur="remoteMethod" />
            <el-input v-else v-model.trim="goodsInfo.buildVendorNbr" :disabled="isDisabled" maxlength="9" class="marginRight" @blur="remoteMethod" />
          </el-form-item>
        </el-col>
        <el-col :span="12" :xl="8">
          <el-form-item label="供应商名称" prop="buildVendorName">
            <el-input v-model="goodsInfo.buildVendorName" disabled class="marginRight" />
          </el-form-item>
        </el-col>
        <el-col :span="12" :xl="8">
          <el-form-item label="供应商SKU ID" prop="outSkuId" :rules="{ required: true, message: `请输入供应商SKU ID`, trigger: 'blur' }">
            <el-input v-model="goodsInfo.outSkuId" :disabled="isDisabled" class="marginRight" @change="handleChange">
              <el-button slot="append" type="primary" :disabled="btnDisabledFun()" @click="$emit('rePullGoodsInfo')">获取</el-button>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" :xl="8">
          <el-form-item label="供应商可售状态" prop="saleStatusName" :rules="{ required: true, message: `请输入供应商可售状态`, trigger: 'blur' }">
            <el-input v-model="goodsInfo.saleStatusName" disabled class="marginRight" />
          </el-form-item>
        </el-col>
        <el-col :span="12" :xl="8">
          <el-form-item label="供应商未税成本" prop="vendorCostPrice">
            <el-input v-model="goodsInfo.vendorCostPrice" disabled class="marginRight" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import headline from '@/views/coi/components/headline.vue'
import { skuSupplierName } from '@/api/coi/onlineTaskAPI/sku.js'
export default {
  components: {
    headline
  },
  props: {
    isDisabled: {
      type: Boolean,
      default: true
    },
    goodsInfo: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      show: this.$route.params.fromTab === 'newProducts',
      btnDisabled: true
    }
  },
  methods: {
    handleChange() {
      this.btnDisabled = false
      this.$message({
        type: 'warning',
        message: '供应商SKU ID改变请点击获取按钮，重新获取商品信息！'
      })
    },
    btnDisabledFun() {
      return this.isDisabled ? true : this.btnDisabled
    },
    // // 查询供应商商名称
    async remoteMethod() {
      this.goodsInfo.buildVendorName = null
      let venderDbr = this.show ? this.goodsInfo.buildVendorNbr9 : this.goodsInfo.buildVendorNbr
      venderDbr = venderDbr.replace(/(^\s*)|(\s*$)/g, '')
      if (venderDbr.length < 9) {
        this.$message({
          type: 'warning',
          message: '请输入9位供应商号！'
        })
        return
      }
      try {
        const { result } = await skuSupplierName(venderDbr)
        if (Array.isArray(result) && result.length > 0) {
          this.goodsInfo.buildVendorName = result[0].vendorName
        } else {
          this.$message.error('你输入的供应商号没有找到，请重新输入正确的供应商号')
        }
      } catch (error) {
        console.log(error)
      }
    },
    submitForm() {
      let flag = null
      this.$refs.ruleForm.validate((valid) => {
        flag = valid
      })
      return flag
    }
  }
}
</script>

<style scoped lang="scss">
.form {
  margin: 0 10px;
  margin-top: 20px;
}
/deep/ .el-form-item__content {
  display: flex;
  align-items: center;
}
.marginRight {
  margin-right: 25px;
}
/deep/.el-input-group__append,
.el-input-group__prepend {
  background-color: #0071ce;
  color: rgb(245, 243, 243);
}
</style>
